<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My (fake) PACS</title>
<style>
body {
    background-color: #efefef;
    font-family: Arial, Helvetica, sans-serif;
}
.listview img {float:left; padding:0px 10px 10px 0px;}
.listview li {list-style-type: none; padding-top: 10px;}
ul li {clear:both;}
ul li h2 {font-size:90%;}
ul a {text-decoration:none;}
ul li p {font-size:80%;}
</style>
<script type="text/javascript">
var githubRaw = "https://raw.githubusercontent.com/ivmartel/dwv/master/tests/data/";
var dataDicom = [
    {
    title: "Baby MRI",
    uri: githubRaw + "?file=bbmri-53323851.dcm&file=bbmri-53323707.dcm&file=bbmri-53323563.dcm&file=bbmri-53323419.dcm&file=bbmri-53323275.dcm&file=bbmri-53323131.dcm",
    uriargs: "&dwvReplaceMode=void",
    img: "babymri.png",
    desc: "Brain MR, 256*256*5, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11"
    },
    {
    title: "Toutatix",
    uri: githubRaw + "?file=osirix-toutatix-100.dcm&file=osirix-toutatix-101.dcm",
    uriargs: "&dwvReplaceMode=void",
    img: "toutatix.png",
    desc: "Chest CT(A), 512*512*1, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 16-12-11, from the Osirix examples, hosted on the dwv github."
    },
    {
    title: "Goudurix",
    uri: githubRaw + "osirix-goudurix.dcm",
    img: "goudurix.png",
    desc: "Chest CT(A), 512*512*1, LittleEndianImplicit [1.2.840.10008.1.2], bits: 16-12-11, from the Osirix examples, hosted on the dwv github.",
    },
    {
    title: "US",
    uri: githubRaw + "gdcm-US-RGB-8-epicard.dcm",
    img: "us.png",
    desc: "US, 640*480*1, BigEndianExplicit [1.2.840.10008.1.2.2], bits: 8-8-7, from the GDCM examples, hosted on the dwv github.",
    },
    {
    title: "Cerebrix",
    uri: githubRaw + "osirix-cerebrix.dcm",
    img: "cerebrix.png",
    desc: "Brain SC (Secondary Capture), 176*224*1, JPEG2000 [1.2.840.10008.1.2.4.91], bits: 16-16-15, from the Osirix examples, hosted on the dwv github.",
    },
    {
    title: "Multiframe",
    uri: githubRaw + "multiframe-test1.dcm",
    img: "multiframe-test1.png",
    desc: "Heart MR, 256*256*1*16, LittleEndianExplicit [1.2.840.10008.1.2.1], bits: 8-8-7, contributed by @yulia-tue, hosted on the dwv github.",
    }
    ];
var dataImg = [
    {
    title: "JPEG",
    uri: "https://upload.wikimedia.org/wikipedia/commons/c/c6/PET-image.jpg",
    img: "brainpet-jpg.png",
    desc: "Brain PET from wikipedia (https://en.wikipedia.org/wiki/File:PET-image.jpg), 531*600*1."
    },
    {
    title: "PNG",
    uri: "https://upload.wikimedia.org/wikipedia/commons/7/7f/Brain_MRI_112010_rgbca.png",
    img: "brainmri-png.png",
    desc: "Brain MRI from wikipedia (https://en.wikipedia.org/wiki/File:Brain_MRI_112010_rgbca.png), 389*504*1."
    },
    {
    title: "JPG",
    uri: "https://upload.wikimedia.org/wikipedia/commons/0/0e/Acute_leukemia-ALL.jpg",
    img: "acute_leukemia.png",
    desc: "Acute Leukimia from wikipedia (https://en.wikipedia.org/wiki/File:Acute_leukemia-ALL.jpg), 347*395*1."
    }
    ];

function getDwvUrl(uri)
{
    var url = 'viewer.html';
    if ( typeof uri !== "undefined" ) {
        url += "?input="+encodeURIComponent(uri);
    }
    return url;
}
function createAndPutHtml(data, id)
{
    for( var i = 0; i < data.length; ++i )
    {
        // image
        var image = document.createElement("img");
        image.src = "images/"+data[i].img;
        // title
        var title = document.createElement("h2");
        title.appendChild(document.createTextNode(data[i].title));
        // description
        var desc = document.createElement("p");
        desc.appendChild(document.createTextNode(data[i].desc));
        if( data[i].comment ) {
            var comment = document.createElement("b");
            comment.appendChild(document.createTextNode(" "+data[i].comment));
            desc.appendChild(comment);
        }

        // link
        var link = document.createElement("a");
        link.href = getDwvUrl(data[i].uri);
        if( data[i].uriargs ) {
            link.href += data[i].uriargs;
        }
        link.className = "dwvlink";
        link.appendChild(image);

        // list item
        var li = document.createElement("li");
        li.appendChild(link);
        li.appendChild(title);
        li.appendChild(desc);
        var ul = document.getElementById(id);
        ul.appendChild(li);
    }
}

// create html once ready
window.onload = function() {
    createAndPutHtml(dataDicom, "uldatadicom");
    createAndPutHtml(dataImg, "uldataimg");
};
</script>
</head>
<body>

<div data-role="page">
<div data-role="content">

<h1>My (fake) PACS</h1>

<p>These are a few data example that are displayed as they could
be on a web interface to a PACS system.</p>

<ul class="listview" data-role="listview" data-inset="true" id="uldatadicom"></ul>

<br style="clear:both">

<p>Non DICOM Image formats:</p>
<ul class="listview" data-role="listview" data-inset="true" id="uldataimg"></ul>

<br style="clear:both">

<p>Data sources:</p>
<ul>
<li><a href="http://www.babymri.org/">Baby MRI</a></li>
<li><a href="http://www.osirix-viewer.com/datasets/">Osirix datasets</a></li>
<li><a href="http://www.creatis.insa-lyon.fr/software/public/Gdcm/Main.html">GDCM (Creatis)</a></li>
</ul>

</div><!-- /page -->
</div><!-- /content -->

</body>
</html>
